<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- V -->
    <div id="app">
        <h1> {{ count }} </h1>
        <button @click="add">点击增加</button>
    </div>
</body>
<script>

    // M
    const obj = {
        // 放数据的选项，所有页面数据都放在这里
        data() {
            return {
                count: 100,
                obj: {}
            }
        },
        // 放函数的选项，所有的函数都放在这里
        methods: {
            add() {
                // console.log('被点击了');
                // console.log(this.$data);

                this.count++

                // 正常来说我们这里获取到的应该是标签中最新的值，但是实际
                // 我们拿到的值是上一次的内容，不是最新的
                // console.log(document.querySelector('h1').innerText);

                // 在延迟的函数中可以发现能够正常的获取到最新的值
                // setTimeout(() => {
                // console.log(document.querySelector('h1').innerText);
                // })

                // 因为 vue 采用的是虚拟 DOM，所谓的虚拟 DOM 其实是一个 js 对象
                // 当 Vue 数据发生改变后不会立即更新到真实 DOM 中，而是先更新虚拟 DOM
                // 当虚拟 DOM 发生改变之后才会通过 DIFF 算法将改变后的内容更新到真实 DOM 中
                // DIFF：用来对比新老 DOM 找到有改变的地方，只更新有变化的地方，目的是提升性能

                // nextTick 会在真实 DOM 更新之后调用
                Vue.nextTick(() => {
                    console.log('nextTick输出', document.querySelector('h1').innerText);
                })

                // this.nextTick()

                console.log('直接输出', document.querySelector('h1').innerText);



                // 在 vue2 中使用的是 Object.defineProperty() 来做的数据响应式
                // 在 vue3 中使用的是 Proxy 做的响应式

                // 该写法在 vue2 中是 true ，3 中是 false 
                const newObj = {}
                this.obj = newObj
                console.log(this.obj == newObj);

            }
        },
    }

    // mvc  mvp  mvvm
    // VM 就是连接数据和视图的桥梁
    const vm = Vue.createApp(obj).mount('#app')



    // 虚拟 DOM 的创建
    // h(
    //     'div',
    //     {
    //         id: 'app',
    //         class: 'a b box',
    //         style: 'color:red'
    //     },
    //     [
    //         h('span', {}, ['你好世界']),
    //         h('span')
    //     ]
    // )




</script>

</html>